<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src='http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js'></script>
<!-- custom select plugin js -->
<script type="text/javascript" src='cust_checkbox_plugin.js'></script>

<link rel="stylesheet" type="text/css" href="../../generalstyle.css">
<link rel="stylesheet" type="text/css" href="../style.css">
<title>Plug-in</title>
<script>
$(document).ready( function() {
	$("input[type='radio'],input[type='checkbox']").custCheckBox();
	$("button").click(function(){
		
		for(i=0;i<$("input[type='radio'],input[type='checkbox']").length;i++)
		{
			console.log($($("input[type='radio'],input[type='checkbox']").get(i)).attr("name") +"-" +$($("input[type='radio'],input[type='checkbox']").get(i)).val());
		}
	});
	
});
</script>
</head>
<body>
<button>click me</button>
<div id="page_wrapper">
<h2>jQuery Custom Check Box and Radio Buttons
	<div>By: Darren Mason</div>
	<div><a href="http://plugins.jquery.com/project/custom_radio_buttons">Download Here</a></div>
	<div><a href="../">Other Plugins</a></div>
	</h2>
	<label class="lbl_header">HTML EXAMPLE</label>
	<pre class="html">
<dfn>Requires a wrapper tag with the class "group". Could be any HTML tag. (div, span, fieldset, etc.)</dfn>

&#60;span class="group"&#62;
	&#60;label for="1x"&#62;Label One:&#60;/label&#62; 
	&#60;input type="checkbox" value="1x" name="checkboxone" id="1x" checked="checked"/&#62;
	&#60;label for="2x"&#62;Label Two:&#60;/label&#62; 
	&#60;input type="checkbox" value="1x" name="checkboxone" id="2x"/&#62;
	&#60;label for="3x"&#62;Label Three:&#60;/label&#62; 
	&#60;input type="checkbox" value="1x" name="checkboxone" id="3x" checked="checked"/&#62;
&#60;/span&#62;
<center><dfn> -- OR --</dfn></center>
&#60;span class="group"&#62;
	&#60;label for="4x"&#62;Label One:&#60;/label&#62; 
	&#60;input type="radio" value="1x" name="checkboxone" id="4x"/&#62;
	&#60;label for="5x"&#62;Label Two:&#60;/label&#62; 
	&#60;input type="radio" value="1x" name="checkboxone" id="5x" checked="checked"/&#62;
	&#60;label for="6x"&#62;Label Three:&#60;/label&#62; 
	&#60;input type="radio" value="1x" name="checkboxone" id="6x"/&#62;
&#60;/span&#62;
	</pre>
<label class="lbl_header">BASIC USAGE</label>
<div class="code">
	<code>
	<pre>
<span  class="html">Applies to all boxes</span>
$("input[type='checkbox']").custCheckBox();
	</pre>
	</code>
</div>
	<fieldset class="group">
	<legend>Check Box Items:</legend>
		<label for="1x">Label One 1x:</label> <input type="checkbox" value="1x" name="checkboxone" id="1x" checked="checked"/>
		<label for="2x">Label Two 2x:</label> <input type="checkbox" value="2x" name="checkboxone" id="2x"/>
		<label for="3x">Label Three 3x:</label> <input type="checkbox" value="3x" name="checkboxone" id="3x" checked="checked"/>
	</fieldset>
	<p/>
<div class="code">
	<code>
	<pre>
<span class="html">Applies to all boxes</span>
$("input[type='radio']").custCheckBox();
	</pre>
	</code>
</div>
	<fieldset class="group">
	<legend>Radio Button Items:</legend>
		<label for="4x">Label One 4x:</label> <input type="radio" value="4x" name="radioone" id="4x"/>
		<label for="5x">Label Two 5x:</label> <input type="radio" value="5x" name="radioone" id="5x" checked="checked"/>
		<label for="6x">Label Three 6x:</label> <input type="radio" value="6x" name="radioone" id="6x"/>
	</fieldset>
	
	<fieldset class="group">
	<legend>Radio Button Items:</legend>
		<label for="7x">Label One 7x:</label> <input type="radio" value="7x" name="radiooneset2" id="7x"/>
		<label for="8x">Label Two 8x:</label> <input type="radio" value="8x" name="radiooneset2" id="8x"/>
		<label for="9x">Label Three 9x:</label> <input type="radio" value="9x" name="radiooneset2" id="9x"/>
		<label for="9x">Label Four 10x:</label> <input type="radio" value="10x" name="radiooneset2" id="10x"/>
	</fieldset>
</div>
</body>
</html>